<template>
  <div>
    <popup ref="popupRef" title="打印预览" :async="true" width="1272" :confirm-button-text="false"
           :cancel-button-text="false">
      <el-button type="primary" v-print="printObj" class="mb-2.5">确定打印</el-button>
      <div id="print_page" class="single-border">
        <table v-for="(item, index) in printLists" :key="index" style="width: 1200px;">
          <tr style="display: flex; justify-content: space-between;">
            <td v-for="(title, key) in printKeyword" :key="key">
              {{ title }}
              <br/>
              <el-text v-if="key == 'index'">{{ index + 1 }}</el-text>
              <el-text v-else>{{ item[key] }}</el-text>
            </td>
          </tr>

          <!--          <tr>-->
          <!--            <td v-for="(title_val, title_key) in printKeyword" :key="title_key" :class="title_val.title_class">-->
          <!--              {{ title_val.title }}-->
          <!--            </td>-->
          <!--            &lt;!&ndash;            <td class="print_w1">序号</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w2">科室</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w3">科室代码</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w3">总费用</td>&ndash;&gt;-->
          <!--          </tr>-->
          <!--          <tr>-->
          <!--            <td v-for="(print_val, print_key) in printKeyword" :key="print_key" :class="print_val.value_class">-->
          <!--              <el-text v-if="print_val.value == 'index'">{{ index + 1 }}</el-text>-->
          <!--              <el-text v-else>{{ item[print_val.value] }}</el-text>-->
          <!--            </td>-->
          <!--            &lt;!&ndash;            <td class="print_w1">{{ index + 1 }}</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w2">{{ item.name }}</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w3">{{ item.code }}</td>&ndash;&gt;-->
          <!--            &lt;!&ndash;            <td class="print_w3">{{ item.room_all_total_fee }}</td>&ndash;&gt;-->
          <!--          </tr>-->

        </table>
      </div>
      <el-button type="primary" v-print="printObj">确定打印</el-button>
    </popup>
  </div>
</template>

<script lang="ts" setup name="printPage">

import Popup from "@/components/popup/index.vue";
import type {PropType} from 'vue'

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const emit = defineEmits(['success', 'close'])

defineProps({
  printKeyword: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
  printLists: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
})

//打开弹窗
const open = () => {
  popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
  emit('close')
}

const printObj = ref({
  id: 'print_page',
  popTitle: '',
  extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口')
  },
  previewOpenCallback() {
    console.log('已经加载完预览窗口')
  },
  beforeOpenCallback(vue: any) {
    //   vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue: any) {
    //   vue.printLoading = false
    console.log('执行了打印')
  },
  closeCallback() {
    console.log('关闭了打印工具')
  },
  clickMounted(vue: any) {
    console.log('点击了打印按钮')
    emits('Closeprint')
    // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
  }
})

defineExpose({
  open
})
</script>

<style scoped>
.print_w1 {
  width: 80px;
}

.print_w2 {
  width: 240px;
}

.print_w3 {
  width: 110px;
}

.print_w4 {
  width: 180px;
}

.print_pa_ud_w1 {
  width: 100px;
}

.print_pa_ud_w2 {
  width: 150px;
}

.print_pa_ud_w3 {
  width: 110px;
}

.print_pa_ud_w4 {
  width: 180px;
}

.single-border table {
  border-collapse: collapse; /*合并边框*/
  width: 100%; /*设置表格宽度*/
  border-top: 1px solid black;
}

.single-border th, .single-border td {
  text-align: center;
  line-height: 30px;
  /*border: 1px solid black; !*设置单线边框*!*/
  /*border-bottom: 1px solid black;*/
  /*border-top: 1px solid black;*/
}
</style>

